<template>
  <div>
    <nav-header :headerTitle="headerTitle" :navBgColor="'#fff'"  ref="navHeader"></nav-header>
    <div class="nav-height"></div>
    <div class="top-border"></div>
    <div class="vpage" ref="vpage" >
      <iframe :src="iframeSrc" ></iframe>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader"; 
import mixin from "@/utils/mixin"; 
export default {
  name: "mockView",
  mixins: [mixin],
  components: {
    navHeader,
  },
  data() {
    return { 
      headerTitle:"", 
      iframeSrc:""
    };
  }, 
  mounted() { 
    this.$setgoindex() ; 
    this.$nextTick(()=>{
      let windH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
      let topH = this.$refs.navHeader.$el.offsetHeight; 
      this.$refs.vpage.style.height = (windH - topH-20) + "px" ;
      let query= this.$route.query;
      this.iframeSrc = query.url;
      this.headerTitle = query.title; 
    })
  }, 
};
</script>

<style scoped lang="scss">
.top-border{
  width: 100%;
  height: 1px;
  position: fixed;
  top: 89px;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.1);
}
.vpage { 
  width:100%; 
  position: relative;
  iframe{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
